/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-11-06 11:20:52
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-11-06 16:39:39
 * @FilePath: /wbn/src/components/CompanyName/components/viewfilelist.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { Tag, Modal, Image, Popconfirm } from 'antd';
import React, { useState, useEffect } from 'react';
import { EyeFilled, CloudDownloadOutlined, CloseOutlined } from '@ant-design/icons';
import genaratorType from '@/utils/genaratorType';
import IconFont from '@/components/IconFont';
import downloadFile from '@/utils/downloadFile';
import RemoteTxtFilePreview from './txtviewer';
import OfficePreview from './office';

function ViewFileList({ files, deleteIt }) {
  const [modal, setModal] = useState({
    open: false,
    onCancel: () => {
      setModal((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  return !files || files.length === 0 ? null : (
    <div className="centerl" style={{ padding: '6px 12px', gap: 10, flexWrap: 'wrap' }}>
      <Modal
        {...modal}
        width={'calc(100vw - 40px)'}
        footer={false}
        style={{ top: 20 }}
        destroyOnClose={true}
      >
        {modal?.type === 'txt' ? (
          <div className="centerl">
            <RemoteTxtFilePreview url={modal.url} />
          </div>
        ) : modal?.type === 'mp3' ? (
          <div className="center">
            <audio src={modal?.url} controls />
          </div>
        ) : modal?.type === 'mp4' ? (
          <video
            src={modal?.url}
            controls
            style={{ width: '100%', height: 'calc(100vh - 110px)' }}
          />
        ) : (
          <OfficePreview url={modal?.url} type={modal?.type} name={modal?.title} />
          // <iframe
          //   src={PREVIEW + encodeURIComponent(modal?.url)}
          //   style={{ width: '100%', height: 'calc(100vh - 110px)', border: 'none' }}
          // />
        )}
      </Modal>
      <div
        style={{
          display: 'none',
        }}
      >
        <Image
          style={{ objectFit: 'cover' }}
          preview={{
            visible: modal?.vs,
            src: modal?.url,
            onVisibleChange: (visible) => {
              setModal((s) => ({
                ...s,
                vs: false,
              }));
            },
          }}
          src={modal?.url}
          shape="square"
        />
      </div>

      <span>附件:</span>
      {files?.map((it) => {
        const type = genaratorType(it?.file_type);
        return (
          <Tag
            key={it?.id}
            style={{ display: 'flex', gap: 8, padding: '2px 4px' }}
            onClick={() => {
              if (type === 'img') {
                setModal((s) => ({
                  ...s,
                  title: it?.file_name,
                  type,
                  url: it?.origin_url,
                  vs: true,
                }));
              } else {
                setModal((s) => ({
                  ...s,
                  title: it?.file_name,
                  type,
                  url: it?.origin_url,
                  open: true,
                }));
              }
            }}
          >
            {type === 'img' ? (
              <img src={it?.origin_url} style={{ width: 18, height: 18, objectFit: 'cover' }} />
            ) : (
              <IconFont type={`icon-${type}`} style={{ fontSize: 18 }} />
            )}
            {it?.file_name}
            <CloudDownloadOutlined
              style={{ color: '#1890ff' }}
              onClick={(e) => {
                e.stopPropagation();
                downloadFile(it?.origin_url, it?.file_name);
              }}
            />
            <div onClick={(e) => e.stopPropagation()}>
              {deleteIt && (
                <Popconfirm
                  title="是否移除该文件？"
                  okText="移除"
                  cancelText="取消"
                  onConfirm={(e) => {
                    e.stopPropagation();
                    deleteIt(it?.id);
                  }}
                >
                  <CloseOutlined style={{ color: '#ff4800' }} />
                </Popconfirm>
              )}
            </div>
          </Tag>
        );
      })}
    </div>
  );
}

export default ViewFileList;
